<template>
	<view class="pageItem">
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-gengduo-copy" @tap="backPage"></view>
			<view class="text">订单详情</view>
		</view>
		<view class="clear_box"></view>
		<view class="status">待支付/待发货/待收货/已完成</view>
		<view class="card user" data-url="/pages/order/orderLogistics" @click="gotopage">
			<view class="iconfont logo">&#xe613;</view>
			<view class="user_txt">
				<view class="u_logistics">您已在福州大程农民新苑3号楼点完成取件，感谢使用菜鸟驿站，期待再次为您服期待再次为您服</view>
				<view class="u_time">2020-08-31 19:23:38</view>
			</view>
			<view class="iconfont more">&#xe62d;</view>
		</view>
		<view class="card user">
			<view class="iconfont logo">&#xe6f1;</view>
			<view class="user_txt">
				<view class="u_phone">小明<label class="phone">18055553621</label></view>
				<view class="address">地址：福建省福州市晋安区福光路162号3层403</view>
			</view>
		</view>
		<view class="card goods">
			<view class="goods_box">
				<image class="g_img" src="../../static/img02/goods.png"></image>
				<view class="box">
					<view class="g_title">柏慧燕都豆皮肉卷肠鸡肉卷干豆卷肠鸡肉卷干豆</view>
					<view class="g_price">￥24.00</view>
					<view class="g_num">x1</view>
				</view>
			</view>
			<view class="g_total"><label class="g_t2">实付款</label><label class="g_t3">￥24.00</label></view>
		</view>
		<view class="card order">
			<view class="c_title">订单信息</view>
			<view class="o_row">
				<view class="o_r_tit">订单编号</view>
				<view class="o_r_val">GM1428114467699191391</view>
				<view class="o_r_btn">复制</view>
			</view>
			<view class="o_row">
				<view class="o_r_tit">下单时间</view>
				<view class="o_r_val">2021-01-01 12:12:12</view>
			</view>
			<view class="o_row">
				<view class="o_r_tit">付款时间</view>
				<view class="o_r_val">2021-01-01 12:12:12</view>
			</view>
			<view class="o_row">
				<view class="o_r_tit">发货时间</view>
				<view class="o_r_val">2021-01-01 12:12:12</view>
			</view>
			<view class="o_row">
				<view class="o_r_tit">收货时间</view>
				<view class="o_r_val">2021-01-01 12:12:12</view>
			</view>
			<view class="o_row">
				<view class="o_r_tit">支付方式</view>
				<view class="o_r_val">微信支付</view>
			</view>
			<view class="o_row">
				<view class="o_r_tit o_r_t_top">备注</view>
				<view class="o_r_val_long">这里是订单的备注，需要模拟的是比较长的情况下的显示，虽然也不一定会特别长</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>
<style>
page{
	background: #F6F8FA;
}
.pageItem{
	width: 100%;
	box-sizing: border-box;
}
.pageItem *{
	box-sizing: border-box;
}
</style>
<style lang="scss">
.pageItem{
	padding: 0 4% 0;
}
.status{
	width: 100%;
	padding: 4vw 0 1vw;
	font-size: 40rpx;
	font-weight: bold;
	color: #222222;
}
.card{
	width: 100%;
	padding: 30rpx;
	background: #ffffff;
	border-radius: 25rpx;
	margin-top: 25rpx;
	.c_title{
		width: 100%;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		padding-bottom: 3vw;
	}
}
.user{
	width: 100%;
	display: flex;
	align-items: center;
	.logo{
		width: 10vw;
		height: 10vw;
		font-size: 6vw;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		background: #0DA4AD;
		border-radius: 50%;
	}
	.user_txt{
		flex: 1;
		padding: 0 25rpx;
		font-size: 30rpx;
		.u_phone{
			width: 100%;
			color: #232426;
			.phone{
				padding-left: 25rpx;
			}
		}
		.address{
			padding-top: 10rpx;
			width: 100%;
			color: #999999;
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:1; 
		}
		.u_logistics{
			font-size: 26rpx;
			color: #0DA4AD;
			overflow: hidden;
			text-overflow: ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
		}
		.u_time{
			font-size: 24rpx;
			color: #666666;
			padding-top: 10rpx;
		}
	}
	.more{
		font-size: 4vw;
		color: #CCCCCC;
	}
}
.goods{
	width: 100%;
	.goods_box{
		width: 100%;
		display: flex;
		align-items: center;
		.g_img{
			width: 22vw;
			height: 22vw;
		}
		.box{
			flex: 1;
			height: 22vw;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 10rpx 25rpx;
			.g_title{
				width: 100%;
				font-size: 30rpx;
				color: #222222;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display:-webkit-box; 
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2; 
			}
			.g_txt{
				width: 100%;
				font-size: 26rpx;
				color: #999999;
				margin-top: 10rpx;
			}
			.g_price{
				width: 100%;
				font-size: 5vw;
				color: #333333;
				font-weight: bold;
			}
			.g_num{
				position: absolute;
				font-size: 28rpx;
				color: #999999;
				right: 0;
				bottom: 10rpx;
			}
		}
	}
	.g_total{
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #9C9C9C;
		justify-content: flex-end;
		padding-top: 10rpx;
		.g_t2{
			padding-left: 10rpx;
			color: #333333;
			font-weight: bold;
		}
		.g_t3{
			font-size: 30rpx;
			color: #D20000;
			font-weight: bold;
			padding-left: 10rpx;
		}
	}
}
.order{
	width: 100%;
	.o_row:nth-child(n+3){
		margin-top: 20rpx;
	}
	.o_row{
		width: 100%;
		display: flex;
		align-items: center;
		.o_r_tit{
			width: 200rpx;
			color: #999999;
			font-size: 28rpx;
		}
		.o_r_t_top{
			align-self: flex-start;
		}
		.o_r_val{
			flex: 1;
			text-align: right;
			color: #333333;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.o_r_val_long{
			flex: 1;
			text-align: right;
			color: #333333;
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.o_r_btn{
			font-size: 24rpx;
			padding: 5rpx 14rpx;
			border-radius: 30rpx;
			background: #F0FEFF;
			border: 1rpx solid #0DA4AD;
			color: #0DA4AD;
			margin-left: 30rpx;
		}
	}
}
.footer{
	width: 100%;
	padding-top: 5vw;
	.btn{
		width: 100%;
		padding: 3vw 0;
		border-radius: 6vw;
		background: #0DA4AD;
		color: #ffffff;
		font-size: 4.5vw;
		font-weight: bold;
		letter-spacing: 2rpx;
		text-align: center;
	}
}
</style>
